<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="hello">
        <div v-for="(item, index) in items" :key="item">{{item}}</div>
        <button @click='bushixiangyingshi'>test</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        const vue01 = new Vue({
            el: '#hello',
            data: {
                items:['lin','kobe','hello','curry']
            },
            methods: {
               push(){
                   //数组最后面添加元素
                   this.items.push('aaa','bbb')
               },

               
               pop(){
                   //删除最后一个元素
                   this.items.pop();
                },
                
                unshift(){
                    //数组最前面添加元素
                    this.items.unshift('aaa','bbb')
                },

               shift(){
                   //删除第一个元素
                   this.items.shift();
               },

               /*   
                    splice(start,deleteNum,replace)用途广泛
                    三个都是可选参数，start表示开始的位置 
                    start为 0表示在第一个元素之前 1表示在第一个元素之后
                    第二个参数表示删除的元素个数 不写的话就删除到最末端
                    第三个是可变参数，代表替换的内容
               */
              
               spliceDeleteAll(){
                    //删除所有元素
                    this.items.splice(0)
               },
               spliceAdd(){
                    this.items.splice(0,0,'hello','ursb')
               },
               spliceReplce(){
                    this.items.splice(1,3,'cookie','session','servlet')
               },

               vueset(){
                   //修改的对象 索引值 修改后的内容
                    Vue.set(this.items,2,'hhhhhhhh');
               },

               //修改数组元素下标不是响应式的方法
               bushixiangyingshi(){
                    this.items[0]='feizhuliu';
                    console.log(this.items[0])
               }
               
            },
        })
    </script>

</body>

</html>